<!-- 代办工作 & 提醒 -->
<template>
  <div class="bg-color-fffff padding-bottom-20">
    <div class="tab-self-box padding-20">
      <span class="font-size-18 tab-txt cursor-pointer" :class="activetab == 'worktable' ? 'active-tab-color' : ''" @click="tabClick('worktable')">待办工作</span>
      <span class="font-size-18 tab-txt cursor-pointer padding-left-50" :class="activetab == 'event' ? 'active-tab-color' : ''" @click="tabClick('event')">事件提醒</span>
      <el-pagination class="normal-pagination" v-if="m_Pagination.total > m_Pagination.pageSize" layout="prev, pager, next" :page-size="m_Pagination.pageSize" @current-change="pageChange" :current-page.sync="m_Pagination.currentPage" :background="false" :total="m_Pagination.total"> </el-pagination>
    </div>
    <div class="margin-left-right-10">
      <el-table :data="tableData" class="margin-left-right-0" row-class-name="rowStyle" :show-header="false" max-height="95" :height="fixHeight ? 160 : null" style="width: 100%" @row-click="tableClick">
        <el-table-column v-for="(col, i) in columns" :key="i" :prop="col.prop" :label="col.label" :width="col.width ? col.width : null" :align="col.align ? col.align : null" :min-width="col.minwidth ? col.minwidth : null">
          <template slot-scope="scope" v-if="col.show">
            <div class="todo-item" v-if="col.prop == 'type' || col.prop == 'workTypeName'">来源：{{ scope.row[col.prop] || '--' }}</div>
            <div class="todo-item" v-else-if="col.prop == 'sender' || col.prop == 'workStatusName'">提交人：{{ scope.row[col.prop] || '--' }}</div>
            <div class="todo-item" v-else-if="col.prop == 'endTime' || col.prop == 'date'">提交时间：{{ scope.row[col.prop] | formatDate('YYYY-MM-DD') }}</div>
            <div class="todo-item todo-item-first one-line-ellipsis"  v-else-if="col.prop == 'title' || col.prop == 'description'">{{ scope.row[col.prop] || '--' }}</div>
            <div class="todo-item" v-else>{{ scope.row[col.prop] || '--' }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
  import dayjs from 'dayjs';
  import MenuTabs from '@/common/components/MenuTabs';
  export default {
    components: { MenuTabs },

    props: {
      fixHeight: {
        type: Boolean,
        default: false,
      },
    },

    data() {
      return {
        activetab: 'worktable',
        tableData: [],
        m_Pagination: {
          total: 0,
          pageSize: 3,
          currentPage: 1,
        },
        Type: 'todo',
        titleWidth: '450px',
        columnsTodo: [
          {
            label: '工作标题',
            prop: 'title',
            align: 'left',
            width: '350px',
            show: true,
          },
          {
            label: '类型',
            prop: 'type',
            align: 'center',
            show: true,
          },
          {
            label: '发布人',
            prop: 'sender',
            align: 'center',
            show: true,
          },
          {
            label: '截止时间',
            prop: 'date',
            align: 'right',
            show: true,
          },
        ],
        columnsEvent: [
          {
            label: '工作标题',
            prop: 'description',
            align: 'left',
            width: '350px',
            show: true,
          },
          {
            label: '类型',
            prop: 'workTypeName',
            align: 'center',
            show: true,
          },
          {
            label: '发布人',
            prop: 'workStatusName',
            align: 'center',
            show: true,
          },
          {
            label: '截止时间',
            prop: 'endTime',
            align: 'right',
            show: true,
          },
        ],
        columns: [],
      };
    },

    mounted() {
      this.initTitleWidth();
      this.columns = this.columnsTodo;
      this.queryData();

      // 监听列表刷新事件
      window.onmessage = () => {
        // 我们能信任信息来源吗？
        if (event.origin !== window.location.origin) {
          console.log('我们不能信任信息来源!!!!!')
          return
        }
        this.queryData('more')
      }
    },

    methods: {
      queryData(more) {
        let params = {
          action: 'todo',
          currentPage: more ? this.m_Pagination.currentPage : 1,
          pageSize: this.m_Pagination.pageSize,
        };
        window.ajaxBase.request(`/v1/business/todo/list`, 'post', params, { showLoading: true }).then(res => {
          this.tableData = res.rows || [];
          this.m_Pagination.total = res.total || 0;
        });
      },

      getwork(more) {
        let params = {
          createOrProcessorKey: JSON.parse(localStorage.getItem('userInfo')).key,
          currentPage: more ? this.m_Pagination.currentPage : 1,
          pageSize: this.m_Pagination.pageSize,
        };
        console.log(params);
        window.ajaxbusinessAssets.request(`/v1/business/work/info/list`, 'post', params, { showLoading: true }).then(res => {
          this.tableData = res.rows || [];
          this.m_Pagination.total = res.total || 0;
        });
      },

      pageChange(size) {
        this.m_Pagination.currentPage = size;
        if (this.activetab == 'worktable') this.queryData('more');
        if (this.activetab == 'event') this.getwork('more');
      },

      tableClick(row) {
        if (row.pcDetailUrl) {
          let url = window.location.origin + row.pcDetailUrl + '&applyUser=' + row.sender + '&applyUserKey=' + row.senderkey;
          let newOppener = window.open(url);
        }
      },

      getDateDiff(dateStr) {
        var publishTime = parseInt(dayjs(dateStr).valueOf() / 1000),
          d_seconds,
          d_minutes,
          d_hours,
          d_days,
          d,
          timeNow = parseInt(dayjs().valueOf() / 1000);

        d = timeNow - publishTime;
        d_days = parseInt(d / 86400);
        d_hours = parseInt(d / 3600);
        d_minutes = parseInt(d / 60);
        d_seconds = parseInt(d);

        if (d_days > 0 && d_days < 30) {
          return d_days + '天前';
        } else if (d_days <= 0 && d_hours > 0) {
          return d_hours + '小时前';
        } else if (d_hours <= 0 && d_minutes > 0) {
          return d_minutes + '分钟前';
        } else if (d_seconds < 60) {
          if (d_seconds <= 0) {
            return '刚刚发表';
          } else {
            return d_seconds + '秒前';
          }
        } else if (d_days >= 30 && d_days < 365) {
          return Math.floor(d_days / 30) + '个月前';
        } else if (d_days >= 365) {
          return Math.floor(d_days / 365) + '年前';
        }
      },

      //tab切换
      tabClick(type) {
        this.m_Pagination.currentPage = 1;
        this.activetab = type;
        if (type == 'worktable') {
          this.queryData();
          this.columns = this.columnsTodo;
        }
        if (type == 'event') {
          this.getwork();
          this.columns = this.columnsEvent;
        }
      },

      initTitleWidth() {
        let windowWidth = document.body.offsetWidth;
        if (windowWidth <= 1440) {
          this.columnsTodo[0].width = '380px';
          this.columnsEvent[0].width = '380px';
        } else if (1440 < windowWidth && windowWidth <= 1920) {
          this.columnsTodo[0].width = '600px';
          this.columnsEvent[0].width = '600px';
        }
      },
    },
  };
</script>
<style scoped lang="scss">
  ::v-deep .rowStyle {
    cursor: pointer;
  }
  .todo-item {
    text-align: left;
  }

  .todo-item-first{
    padding-right:130px;
  }

  @media only screen and (max-width: 1450px) {
    .todo-item-first {
      width: 450px;
    }
  }
  @media only screen and (min-width: 1450px) {
    .todo-item-first {
      width: 600px;
    }
  }
</style>
